<template>
	<el-container>
		<el-header>
			<el-form :model="searchmodel" :inline="true" class="demo-form-inline" style="width: 70%; float: left;">
				<el-form-item label="ISBN">
					<el-input placeholder="ISBN" v-model="searchmodel.name" @input="change($event)"></el-input>
				</el-form-item>
				<el-form-item label="读书状态">
					<el-select v-model="searchmodel.age" placeholder="请选择状态">
						<el-option label="在馆" value="0"></el-option>
						<el-option label="外借" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
			<div style="float: right;">
				<el-button type="success" icon="el-icon-circle-plus" @click="addBook()"></el-button>
			</div>
		</el-header>
		<el-main style="padding: unset;">
			<el-table :max-height="tableHeight" :data="tableData" border>
				<el-table-column fixed type="expand">
					<template slot-scope="props">
						<el-container>
							<el-row>
								<el-col :lg="3" :sm="4" :xs="5" :offset="1">
									<img height="100" width="100" v-if="!props.row.cover" src="~@/assets/logo.png"
										alt="electron-vue" />
									<img height="100" width="100" v-if="props.row.cover" src="props.row.cover"
										alt="electron-vue" />
								</el-col>
								<el-col :lg="6" :sm="6" :xs="6" :offset="1">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-form-item label="作者:">
											<span>{{ props.row.title }}</span>
										</el-form-item>
										<el-form-item label="ISBN:">
											<span>{{ props.row.isbn }}</span>
										</el-form-item>
										<el-form-item label=" 总页数:">
											<span>{{ props.row.pageCount }}</span>
										</el-form-item>
										<el-form-item label="出版日期:">
											<span>{{ props.row.publishDate }}</span>
										</el-form-item>
										<el-form-item label="语言:">
											<span>{{ props.row.language }}</span>
										</el-form-item>
										<el-form-item label="状态:">
											<span>{{ props.row.state }}</span>
										</el-form-item>
										<el-form-item label="借阅人:">
											<span>{{ props.row.readBy }}</span>
										</el-form-item>
									</el-form>
								</el-col>
								<el-col :lg="11" :sm="11" :xs="11" :offset="1">
									<el-form label-position="left" inline>
										<el-form-item label="简介:">
											<span>{{ props.row.textSnippet }}</span>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</el-container>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="title">
				</el-table-column>
				<el-table-column prop="authors" label="authors">
				</el-table-column>
				<el-table-column prop="publishedDate" label="publishDate">
				</el-table-column>
				<el-table-column prop="isbn" label="isbn">
				</el-table-column>
				<el-table-column prop="pageCount" label="pageCount">
				</el-table-column>
				<el-table-column prop="language" label="language">
				</el-table-column>
				<el-table-column prop="textSnippet" label="textSnippet" show-overflow-tooltip>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
						<el-button type="text" style="color: red;" @click="open2" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<!-- Form -->

		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
			<el-form :model="testmodel">
				<el-row>
					<el-col :lg="12">
						<el-form-item label="ISBN" :label-width="formLabelWidth">
							<el-input v-model="testmodel.isbn" @input="change($event)"></el-input>
						</el-form-item>
						<el-form-item label="书名" :label-width="formLabelWidth">
							<el-input v-model="testmodel.title" @input="change($event)"></el-input>
						</el-form-item>
						<el-form-item label="作者" :label-width="formLabelWidth">
							<el-input v-model="testmodel.authors" @input="change($event)"></el-input>
						</el-form-item>
						<el-form-item label="发行日期" :label-width="formLabelWidth">
							<el-input v-model="testmodel.publishedDate" @input="change($event)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="封面" :label-width="formLabelWidth" style="margin-bottom: 12px;">
							<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="testmodel.cover" :src="testmodel.cover" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="语言" :label-width="formLabelWidth">
							<el-select v-model="testmodel.language" placeholder="请选择活动区域">
								<el-option label="中文" value="zh-CN"></el-option>
								<!-- <el-option label="区域二" value="beijing"></el-option> -->
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="简介" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="testmodel.name"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>

	</el-container>
</template>

<script>
	// import common from './common'
	export default {
		name: 'category-page',
		data() {
			return {
				dialogTitle:'添加用户',
				/*delete dailog*/
				delDialogVisible: false,
				/*upload*/
				imageUrl: '',
				formLabelWidth: '120px',
				testmodel: {
					title: '王小虎自传',
					authors: '王小虎',
					cover: '',
					publishedDate: '2016-05-03',
					isbn: 9382048723,
					pageCount: '998',
					language: 'ZH-zn',
					state: '在馆',
					readBy: '黄小花',
					textSnippet: '本书共有21章和4个附录,介绍了C#语言的数据类型,操作符,方法,类,接口,异常处理等基本概念,深入讨论了泛型,迭代器,反射,线程和互操作性等高级主题,还介绍了LINQ技术 ...'
				},
				searchmodel: {
					title: '王小虎自传',
					authors: '王小虎',
					publishedDate: '2016-05-03',
					cover: '',
					isbn: 9382048723,
					pageCount: '998',
					language: 'ZH-zn',
					state: '在馆',
					readBy: '黄小花',
					textSnippet: '本书共有21章和4个附录,介绍了C#语言的数据类型,操作符,方法,类,接口,异常处理等基本概念,深入讨论了泛型,迭代器,反射,线程和互操作性等高级主题,还介绍了LINQ技术 ...'
				},
				dialogFormVisible: false,
				tableHeight: 800, //document.body.clientHeight - 120,
				tableData: [{
						title: '王小虎自传',
						authors: '王小虎',
						publishedDate: '2016-05-03',
						isbn: 9382048723,
						cover: '',
						pageCount: '998',
						language: 'ZH-zn',
						state: '在馆',
						readBy: '黄小花',
						textSnippet: '本书共有21章和4个附录,介绍了C#语言的数据类型,操作符,方法,类,接口,异常处理等基本概念,深入讨论了泛型,迭代器,反射,线程和互操作性等高级主题,还介绍了LINQ技术 ...'
					},
					{
						title: '孙子兵法',
						authors: '王小虎',
						cover: '',
						publishedDate: '2016-05-03',
						isbn: 9382048723,
						pageCount: '1518',
						language: '200333',
						state: '外借',
						readBy: '张小兰,黄小花',
						textSnippet: '本书共有21章和4个附录,介绍了C#语言的数据类型,操作符,方法,类,接口,异常处理等基本概念,深入讨论了泛型,迭代器,反射,线程和互操作性等高级主题,还介绍了LINQ技术 ...'
					}
				]
			}
		},
		created: function() {
			console.log()
		},
		methods: {
			addBook(){
				this.dialogTitle ='添加读书'
				this.dialogFormVisible=true
			},
			handleClick(row) {
				this.dialogTitle = '编辑读书'
				console.log(row);
				this.testmodel = row
				this.dialogFormVisible = true
			},
			change(e) {
				this.$forceUpdate()
			},
			/*upload*/
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			/*delete dialog*/
			open2() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		watch: {
			tableHeight(val) {
				console.log('sdfasdf')
				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
				if (!this.timer) {
					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
					this.tableHeight = val
					console.log("kkkkk" + val)
					this.timer = true
					let that = this
					setTimeout(function() {
						// 打印screenWidth变化的值
						console.log(that.tableHeight)
						that.timer = false
					}, 400)
				}
			}
		},
		mounted() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.screenHeight = document.body.clientHeight
					that.tableHeight = window.screenHeight - 100
				})()
			}
		}
	}
</script>

<style scoped="scoped">
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {

		color: #99a9bf;
	}

	.demo-table-expand .el-form-item label {
		width: 100% !important;
		font-size: 20px !important;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.dialog-form .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	/* upload */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 170px;
		height: 170px;
		line-height: 170px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.avatar {
		width: 170px;
		height: 170px;
		display: block;
	}
</style>
